<template>
  <view class="address-edit-container">
    <!-- 表单区域 -->
    <view class="form-container">
      <view class="form-item">
        <text class="label">收货人</text>
        <input 
          v-model="formData.name" 
          placeholder="请输入收货人姓名" 
          :disabled="!isEditMode"
        />
      </view>
      
      <view class="form-item">
        <text class="label">联系电话</text>
        <input 
          v-model="formData.mobile" 
          placeholder="请输入联系电话" 
          type="number"
          :disabled="!isEditMode"
        />
      </view>
      
      <view class="form-item" @click="showRegionPicker">
        <text class="label">所在地区</text>
        <input 
          v-model="regionText" 
          placeholder="请选择省市区" 
          disabled
        />
        <image class="arrow" src="/static/images/jt.png"></image>
      </view>
      
      <view class="form-item">
        <text class="label">详细地址</text>
        <textarea 
          v-model="formData.address" 
          placeholder="请输入详细地址" 
          :disabled="!isEditMode"
        />
      </view>
    </view>
    
    <!-- 底部按钮 -->
    <view class="">
      <!-- 编辑模式下显示保存按钮 -->
      <button 
        class="save-btn" 
        v-if="isEditMode" 
        @click="saveAddress"
      >保存地址</button>
      
      <!-- 详情模式下显示编辑和删除按钮 -->
      <template v-else>
        <button class="edit-btn" @click="enterEditMode">编辑</button>
        <button class="delete-btn" @click="deleteAddress">删除</button>
      </template>
    </view>
    
    <!-- 地区选择器 -->
    <region-picker 
      ref="regionPicker" 
      @confirm="onRegionConfirm"
    />
  </view>
</template>
<script>
import RegionPicker from '@/components/region-picker/region-picker.vue'
  import {
	  	request
	  } from '@/utils/request.js'
export default {
  components: {
    RegionPicker
  },
  data() {
    return {
		regionText:'',
      isEditMode: true, // 是否为编辑模式
      addressId: null, // 地址ID
      formData: {
        name: '',
        mobile: '',
        province: '',
        city: '',
        area: '',
        address: '',
        is_default: false
      },
      tempRegion: [] // 临时存储选择的地区
    }
  },
  computed: {
    // 计算地区显示文本
   //  regionText() {
   //    const { province, city, area } = this.formData
	  // console.log(this.formData)
   //    return province && city && area ? `${province} ${city} ${area}` : ''
   //  }
  },
  onLoad(options) {
	  console.log(options)
    // 获取地址ID
    this.addressId = options.id || null
    
    // 判断模式：有ID且没有edit参数为详情模式，否则为编辑模式
    this.isEditMode = !options.id || options.edit === '1'
    
    // 加载地址数据
    if (options.id) {
      this.loadAddressData(options.id)
    }
  },
  methods: {
	  updateAddress(res){
		  console.log(1111,res)
		  this.formData =res;
		  const { province, city, area } = this.formData
		  this.regionText =  province && city && area ? `${province} ${city} ${area}` : ''
	  },
    // 加载地址数据
    loadAddressData(id) {
      uni.showLoading({ title: '加载中...' })
      // 模拟API请求
      setTimeout(() => {
        // 模拟数据
        const mockData = {
          id: 1,
          name: '张三',
          mobile: '13800138000',
          province: '广东省',
          city: '深圳市',
          area: '南山区',
          address: '科技园路100号',
          is_default: true
        }
        
        this.formData = { ...mockData }
        uni.hideLoading()
      }, 500)
    },

    // 显示地区选择器
    showRegionPicker() {
      if (!this.isEditMode) return
	  console.log(this.$refs.regionPicker)
      this.$refs.regionPicker.isShow()
    },
    
    // 地区选择确认
    onRegionConfirm(region) {
		console.log(region)
      this.tempRegion = region
      this.formData.province = region[0]
      this.formData.city = region[1]
      this.formData.area = region[2]
	  console.log(11111)
	    const { province, city, area } = this.formData
	   this.regionText =  province && city && area ? `${province} ${city} ${area}` : ''
    },
    
    // 默认地址切换
    onDefaultChange(e) {
      this.formData.is_default = e.detail.value
    },
    
    // 进入编辑模式
    enterEditMode() {
      this.isEditMode = true
    },
    
    // 保存地址
    saveAddress() {
      // 表单验证
      if (!this.validateForm()) return
      let params = this.formData;
	  params.is_default =1;
      uni.showLoading({ title: '保存中...' })
		console.log(11111)
		request({
			url: 'address/info-save',
			method: 'post',
			data: params
		}).then(res => {
			if (res.status == 200) {
				console.log(res.data);
				uni.hideLoading()
				 uni.showToast({ title: '保存成功' })
				this.$emit('confirm', res.data) 
			}
		})
      // 模拟API请求
      setTimeout(() => {
		  console.log(22222)
      
        // setTimeout(() => {
        //   uni.navigateBack()
        // }, 1500)
      }, 800)
    },
    
    // 表单验证
    validateForm() {
      const { name, mobile, province, city, area, address } = this.formData
      
      if (!name) {
        uni.showToast({ title: '请输入收货人姓名', icon: 'none' })
        return false
      }
      
      if (!/^1[3-9]\d{9}$/.test(mobile)) {
        uni.showToast({ title: '请输入正确的手机号', icon: 'none' })
        return false
      }
      
      if (!province || !city || !area) {
        uni.showToast({ title: '请选择所在地区', icon: 'none' })
        return false
      }
      
      if (!address) {
        uni.showToast({ title: '请输入详细地址', icon: 'none' })
        return false
      }
      
      return true
    },
    
    // 删除地址
    deleteAddress() {
      uni.showModal({
        title: '提示',
        content: '确定要删除该地址吗？',
        success: (res) => {
          if (res.confirm) {
            uni.showLoading({ title: '删除中...' })
            // 模拟API请求
            setTimeout(() => {
              uni.hideLoading()
              uni.showToast({ title: '删除成功' })
              
              // 返回上一页并刷新数据
              const pages = getCurrentPages()
              if (pages.length > 1) {
                const prevPage = pages[pages.length - 2]
                if (prevPage.$vm && prevPage.$vm.loadAddressList) {
                  prevPage.$vm.loadAddressList()
                }
              }
              
              setTimeout(() => {
                uni.navigateBack()
              }, 1500)
            }, 800)
          }
        }
      })
    }
  }
}
</script>

<style>
.address-edit-container {
	width: 100%;
	padding-bottom: 30rpx;
  background-color: #fff;
  box-sizing: border-box;
  
}

.header {
  padding: 30rpx;
  background-color: #fff;
  border-bottom: 1rpx solid #eee;
}

.header .title {
  font-size: 36rpx;
  font-weight: bold;
}

.form-container {
  margin-top: 20rpx;
  background-color: #fff;
  padding: 0 30rpx;
  box-sizing: border-box;
}

.form-item {
  padding: 30rpx 0;
  border-bottom: 1rpx solid #f5f5f5;
  position: relative;
  display: flex;
  align-items: center;
}

.form-item:last-child {
  border-bottom: none;
}

.label {
  width: 150rpx;
  font-size: 28rpx;
  color: #333;
}

input, textarea {
  font-size: 28rpx;
  color: #333;
  width: 450rpx;
}

textarea {
  height: 120rpx;
  padding: 10rpx 0;
  width: 450rpx;
}

.arrow {
  width: 40rpx;
  height: 40rpx;
  margin-left: 20rpx;
}

.switch-item {
  justify-content: space-between;
}

.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100rpx;
  background-color: #fff;
  display: flex;
  align-items: center;
  padding: 0 20rpx;
  box-shadow: 0 -2rpx 10rpx rgba(0,0,0,0.05);
}

.save-btn, .edit-btn, .delete-btn {
  height: 80rpx;
  line-height: 80rpx;
  border-radius: 40rpx;
  font-size: 30rpx;
}

.save-btn, .edit-btn {
  background-color: #e74c3c;
  color: #fff;
  width: 300rpx;
}

.delete-btn {
  flex: 1;
  margin-left: 20rpx;
  background-color: #fff;
  color: #e74c3c;
  border: 1rpx solid #e74c3c;
}
</style>
